<template>
  <view
      @click="toGoodsDetail(item)"
      class="good-card">
    <view
        v-if="item.bodyJson.length>0"
        class="good-card-image">
      <image
          v-if="item.bodyJson[0].type==='fileIdOfImg'"
          mode="aspectFill"
          class="good-image"
          :src="$kt.file.visit(item.bodyJson[0].value)"></image>
      <video
          v-else
          class="good-image"
          :src="$kt.file.visit(item.bodyJson[0].value)"></video>
    </view>
    <view class="good-card-text-box">
      <view class="good-card-text">{{item.name}}</view>
      <view style="height: 10rpx"></view>
      <view>
        <view class="price" style="position: relative">
          <view style="display: inline-block">￥</view>
          {{item.price}}</view>
        <image
            v-if="false"
            style="display: inline-block;
                      width: 30rpx;height: 30rpx;
                      position: absolute;right: 10rpx;
"
            :src="$kt.file.byPath('image/cart.svg')"></image>
        <view>

        </view>
      </view>
      <view
          v-if="$i18n.getLanguageCode()!=='bg_BG'&&$i18n.getLanguageCode()!=='el_GR'"
          class="grid-tips">{{$i18n.zhToGlobal('已售出')}}：{{item.salesVolumeShowNumber}} | {{$i18n.zhToGlobal('剩余')}}：{{item.stockNumber}}</view>
      <view
          v-else
          style="text-align: center"
          class="grid-tips">
        <view>{{$i18n.zhToGlobal('已售出')}}：{{item.salesVolumeShowNumber}}</view>
        <view>{{$i18n.zhToGlobal('剩余')}}：{{item.stockNumber}}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  methods:{
    toGoodsDetail(item) {
      uni.navigateTo({
        url: '/pages/goodsDetail/goodsDetail?goodsId=' + item.id
      })
    },
  }
}
</script>

<style lang="scss" scoped>

.good-card{
  position: relative;
  background-color: #FFFFFF;
  margin-top: 20rpx;
  border: 1rpx solid #F0F0F0;
  border-radius: 20rpx;
  width: 330rpx;
  .good-image{
    width: 100%;
    border-radius: 20rpx 20rpx 0 0;
    height: 300rpx;
  }
  .good-card-text{
    font-size: 30rpx;
  }
  .good-card-text-box{
    padding: 10rpx;
    box-sizing: border-box;

    .good-card-text{
      // 超出省略号
      overflow: hidden;
      text-overflow: ellipsis;
      // 最多两行
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}
.good-card:active{
  transform: scale(.98);
}
.price{
  font-size: 32rpx;
  color: #FF0000;
  display: inline-block;
}
.grid-tips{
  font-size: 20rpx;
  color: #999999;
  margin-top: 20rpx;
  text-align: left;
}

.goods-card-box{
  display: inline-block;
  width: 50%;
  background-color: #999999;
}

</style>
